<template>
  <div class="basic-container">
    <Card
      title="基本信息"
    >
      <a-form :form="form" class="role-account-modify-container">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="姓名">
              <a-input
                v-decorator="[
                  'username',
                  {
                    initialValue: user.username,
                    rules: [
                      formRules.required('必填'),
                    ],
                    validateFirst: true,
                    validateTrigger: 'change'
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="手机号">
              <a-input
                v-decorator="[
                  'mobile',
                  {
                    initialValue: user.mobile,
                    rules: [
                      formRules.required('必填'),
                      formRules.mobile('手机号格式错误'),
                    ],
                    validateFirst: true,
                    validateTrigger: 'change'
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="座机">
              <a-input
                v-decorator="['number2', { rules: [{ required: true, message: 'Please input your note!' }] }]"
              />
            </a-form-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-item label="邮箱">
              <a-input
                v-decorator="[
                  'femail',
                  {
                    initialValue: user.email,
                    rules: [
                      formRules.email('Incorrect email invalid')
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="地址">
              <a-input
                v-decorator="['number2', { rules: [{ required: true, message: 'Please input your note!' }] }]"
              />
            </a-form-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-item label="状态">
              <a-input
                disabled
                :value="user.status ? '正常' : '停用'"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </Card>
  </div>
</template>

<script>
import { Card } from '@/components'
import props from './props'
import form from './form'

export default {
  mixins: [props, form],

  components: {
    Card,
  },

  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    handleSelectChange (value) {
      console.log(value)
      this.form.setFieldsValue({
        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
      })
    },
  },
}
</script>

<style lang="scss">
.role-account-modify-container {
  .ant-form-item {
    // margin-bottom: $margin-xs;
  }
}
</style>
